import React from 'react'
import { Button, Checkbox, Form, Input,Select,message} from 'antd';
import request from '../../utils/request';
import { addaccountApi } from '../../apis/userApi';

import { useSelector,useDispatch } from 'react-redux';
import * as addCountModuls from '../../store/modules/addCount'

export default function AddAcount() {
  const refData=React.useRef(null)
  // const [loading,setLoading]=React.useState(false)
  const {loading}=useSelector((state)=>{
    return state.addCount
  })

  const dispatch=useDispatch()
  const onFinish = (values) => {
    console.log('Success:', values);
    // setLoading(true)
    dispatch(addCountModuls.setLoading(true))


    dispatch(addCountModuls.addcount(values))

    // request("/users/addOrEditAccount",{
    //   method:"post",
    //   body:values
    // })
    // addaccountApi(values)
    // .then(res=>{
    //   // setLoading(false)
    //   dispatch(addCountModuls.setLoading(false))
    //   message.success('添加成功')
    //   //清除表单上的数据
    //   console.log('refData.current',refData.current)
    //   refData.current.resetFields()
    // })
    // .catch(res=>{
    //   // setLoading(false)
    //   dispatch(addCountModuls.setLoading(fales))
    // })



    // fetch("http://jacklv.cn/users/addOrEditAccount",{
    //   method:'post',
    //   body:JSON.stringify(values),
    //   headers:{
    //     "Content-Type": "application/json",
    //     token: localStorage.token,
    //   }
    // })
    // .then((response)=>response.json())
    // .then(res=>{
    //   console.log("res",res)
    //   if (res.code==1) {
    //     setLoading(false)
    //     message.success('添加成功')
    //     //清除表单上的数据
    //     console.log('refData.current',refData.current)
    //     refData.current.resetFields()
    //   }else{
    //     setLoading(false)
    //     message.error('添加失败')
    //   }
    // }

    // )


  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <Form ref={refData}
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    // 设置初始值
    initialValues={{
      userGroup: '普通管理员',
 
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="账户名"
      name="account"
      rules={[
        {
          required: true,
          message: '请输入账户名',
        },
        
       
      ]}
    >
      <Input  placeholder='请输入账户名'/>
    </Form.Item>

    <Form.Item
      label="初始密码"
      name="password"
      rules={[
        {
          required: true,
          message: '请输入初始密码!',
        },
       
      ]}
    >
      <Input.Password  placeholder='请输入初始密码'/>
    </Form.Item>
    <Form.Item
      label="角色"
      name="userGroup"
      rules={[
        {
          required: true,
          message: '请选择角色!',
        },
       
      ]}
    >
       <Select placeholder='请选择角色'>
          <Select.Option value="超级管理员">超级管理员</Select.Option>
          <Select.Option value="普通管理员">普通管理员</Select.Option>
          
        </Select>
    </Form.Item> 

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button loading={loading} type="primary" htmlType="submit">
      新增
      </Button>
    </Form.Item>
  </Form>
  )
}
 